<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级弹窗组件</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/alert.css">
</head>
<body>
    <div class="header">
        <h1>高级弹窗组件</h1>
        <p class="subtitle">基于原始Scratch弹窗扩展优化，适用于任何现代网页应用</p>
    </div>
    
    <div class="controls">
        <button class="btn btn-success" onclick="showAlert('success', '操作成功', '您的请求已成功处理！')">
            <svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
            </svg>
            成功弹窗
        </button>
        <button class="btn btn-warning" onclick="showAlert('warning', '警告提示', '您即将执行不可逆操作，请确认！')">
            <svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
            </svg>
            警告弹窗
        </button>
        <button class="btn btn-error" onclick="showAlert('error', '发生错误', '系统遇到问题，请稍后再试或联系支持团队')">
        <svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
            <path d="M16 16L0 0M0 16l16-16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
            错误弹窗
        </button>
        <button class="btn btn-info" onclick="showAlert('info', '信息通知', '系统将在今晚10点进行维护，请提前保存工作')">
            <svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
            </svg>
            信息弹窗
        </button>
        <button class="btn btn-question" onclick="showAlert('question', '问题确认', '您确定要删除这个项目吗？此操作无法撤销')">
            <svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
            </svg>
            问题弹窗
        </button>
        <button class="btn btn-custom" onclick="showCustomAlert()">
            <svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
            </svg>
            自定义弹窗
        </button>
        <button class="btn btn-custom" onclick="showAdvancedAlert()">
            <svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
            </svg>
            高级弹窗
        </button>
    </div>
    
    <div class="features">
        <div class="feature-card">
            <h3><svg width="24" height="24" fill="currentColor" viewBox="0 0 16 16"><path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/><path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/></svg>队列系统</h3>
            <p>弹窗请求会自动排队，确保一次只显示一个弹窗，避免重叠干扰用户体验。</p>
        </div>
        
        <div class="feature-card">
            <h3><svg width="24" height="24" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M8 13A5 5 0 1 1 8 3a5 5 0 0 1 0 10zm0 1A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/><path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/><path d="M9.5 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/></svg>精美动画</h3>
            <p>优雅的入场和退场动画，使用自定义缓动函数实现流畅的视觉效果，增强用户交互体验。</p>
        </div>
        
        <div class="feature-card">
            <h3><svg width="24" height="24" fill="currentColor" viewBox="0 0 16 16"><path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm4.5 0a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm5 2.755C12.146 12.825 10.623 12 8 12s-4.146.826-5 1.755V14a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-.245z"/></svg>响应式设计</h3>
            <p>完美适配各种屏幕尺寸，从桌面显示器到移动设备，确保所有用户获得一致体验。</p>
        </div>
    </div>
    
    <div class="code-container">
        <div class="code-header">
            <div class="code-title">基本使用示例</div>
            <button class="copy-btn" onclick="copyCode('basic-example')">复制代码</button>
        </div>
        <pre id="basic-example"><code>// 显示成功弹窗
showAlert('success', '操作成功', '您的请求已成功处理！');

// 显示警告弹窗
showAlert('warning', '警告提示', '您即将执行不可逆操作，请确认！');

// 显示错误弹窗
showAlert('error', '发生错误', '系统遇到问题，请稍后再试或联系支持团队');

// 显示信息弹窗
showAlert('info', '信息通知', '系统将在今晚10点进行维护，请提前保存工作');

// 显示问题弹窗
showAlert('question', '问题确认', '您确定要删除这个项目吗？此操作无法撤销');</code></pre>
    </div>
    
    <div class="code-container">
        <div class="code-header">
            <div class="code-title">高级弹窗示例</div>
            <button class="copy-btn" onclick="copyCode('advanced-example')">复制代码</button>
        </div>
        <pre id="advanced-example"><code>// 带回调的确认弹窗
showAdvancedAlert({
    type: 'question',
    title: '删除确认',
    content: '您确定要永久删除这个项目吗？',
    buttons: [
        { text: '取消', value: false, class: 'btn-cancel' },
        { text: '确认删除', value: true, class: 'btn-danger' }
    ],
    callback: (result) => {
        console.log('用户选择:', result);
        if (result) {
            // 执行删除操作
            showAlert('success', '删除成功', '项目已永久删除');
        } else {
            showAlert('info', '已取消', '删除操作已取消');
        }
    }
});

// 多选项弹窗
showAdvancedAlert({
    type: 'info',
    title: '请选择操作',
    content: '您想如何处理这个文件？',
    buttons: [
        { text: '查看', value: 'view', class: 'btn-info' },
        { text: '下载', value: 'download', class: 'btn-primary' },
        { text: '分享', value: 'share', class: 'btn-success' },
        { text: '取消', value: false, class: 'btn-cancel' }
    ],
    callback: (choice) => {
        const actions = {
            view: () => showAlert('info', '查看', '正在打开文件查看器...'),
            download: () => showAlert('success', '下载', '文件下载已开始...'),
            share: () => showAlert('info', '分享', '打开分享选项...')
        };
        
        if (choice && actions[choice]) {
            actions[choice]();
        } else {
            showAlert('info', '已取消', '没有执行任何操作');
        }
    }
});</code></pre>
    </div>
    
    <div class="footer">
        <p>基于原始Scratch扩展"弹窗-圆粽子YuanZongzi"重构 | 设计：圆粽子 | <a href="https://space.bilibili.com/3546825153841333" target="_blank">Bilibili主页</a> | 修改者：小钻风的蛇作演讲 | <a href="https://space.bilibili.com/2051233481" target="_blank">Bilibili主页</a></p>
        <p>© 2025 高级弹窗组件 - 可自由用于个人和商业项目</p>
    </div>

    <div class="ua-container" id="alertContainer">
        <div class="ua-box">
            <div class="ua-header">
                <div class="ua-icon" id="alertIcon"></div>
                <h3 class="ua-title" id="alertTitle">标题</h3>
            </div>
            <div class="ua-content" id="alertContent">内容</div>
            <div class="ua-buttons" id="alertButtons">
                <button class="ua-button" id="alertButton">确定</button>
            </div>
        </div>
    </div>

    <script src="scripts/alert.js"></script>
    <script src="scripts/main.js"></script>
    <script src="scripts/examples.js"></script>
</body>
</html>